<template>
  <el-row>
    <el-col :span="6">
      <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
        <div>
          <el-text class="mx-1" type="success" >aaa</el-text>
        </div>
      </el-scrollbar>
    </el-col>
    <el-col :span="12">
      <el-text class="mx-1" type="primary" >areaDevices{{ areaId }}</el-text>
    </el-col>
    <el-col :span="6">
      areaDevices{{ areaId }}
    </el-col>
  </el-row>
</template>

<script setup name="AreaDevices">
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {ref, watch} from "vue";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore()

const sideTheme = computed(() => settingsStore.sideTheme);

const areaId = ref('');
const route = useRoute();

const getAreaIdFromRoute = (route) => {
  return route.params && route.params.areaId;
}

(() => {
  areaId.value = getAreaIdFromRoute(route)
  console.log(areaId)
})();

watch(
    () => route.params,
    (newValue, _) => {
      areaId.value = newValue && newValue.areaId
    }
)

// onBeforeRouteUpdate((to) => {
//   areaId.value = getAreaIdFromRoute(to)
// })


</script>

<style scoped>

</style>